<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav" @titleClick='titleClick'></detail-nav-bar>
    <scroll class="content-scroll">
      <detail-swiper :top-images='topImages'></detail-swiper>
      <detail-base-info :goods='goods'></detail-base-info>
      <detail-shop-info :shop ='shop' v-if="shop!=null"></detail-shop-info>
      <detail-goods-info :detail-info='detailInfo'></detail-goods-info>
      <detail-param-info :param-info='paramInfo'></detail-param-info>
      <detail-comment-info :comment-info='commentInfo'></detail-comment-info>
      <goods-list :goods='recommends'></goods-list>
    </scroll>
  </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'

import Scroll from 'components/common/scroll/Scroll'
import GoodsList from 'components/content/goods/GoodsList'

// 从detail中导入整合的数据
import {getDetail,Goods,Shop,GoodsParam,getRecommend} from 'network/detail';

export default {
  name: 'Detail',
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    Scroll,
    GoodsList,
  },
  data(){
    return{
      iid:null,
      topImages:[],
      goods:{},
      shop:{},
      detailInfo:{},
      paramInfo:{},
      commentInfo:{},
      recommends:[],
    }
  },
  created () {
    // 1.保存传入的iid,即当前点击的商品id
    this.iid = this.$route.params.iid

    // 2.根据iid请求详情数据
    getDetail(this.iid).then(res => {
      const data = res.data.result
      console.log(res)
      // 1.顶部轮播图数据
      this.topImages = data.itemInfo.topImages
      // 2.获取商品信息
      this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services)
      // 3.获取店铺信息
      this.shop = new Shop(data.shopInfo)
      // 4.保存商品的详情数据
      this.detailInfo = data.detailInfo;
      // 5.获取商品参数信息
      this.paramInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule)
      // 6.获取评论信息
      if(data.rate.cRate !== 0){
        this.commentInfo = data.rate.list[0]
      }
    })

    // 3.请求推荐数据
    getRecommend().then(res => {
      console.log(res)
      this.recommends = res.data.data.list
    })
  },
  methods: {
    titleClick(index){
      console.log(index)
    }
  }
}
</script>

<style scoped>
#detail{
  position: relative;
  z-index: 9;
  background-color: #fff;
  height: 100%;
  /* overflow: hidden; */
}
.detail-nav{
  position: relative;
  z-index: 9;
  background-color: #fff;
}
.content-scroll{
  height: calc(100% - 44px);
  /* position: position;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 49px; */
  /* overflow: hidden; */
}
</style>
